<template>
  <div>
    <!--
      API: 说明
        * height：高度
        *
        * hour-span：当时间维度为天时，最小的时间间隔（小时）
        *
        * snap：If snap is set to true, the Gantt will snap tasks to the nearest slot during dragging while resizing or moving
        *
        * pdf：导出pdf配置
        *
        * resizable：通过拖拽调整列宽度
        *
        * selectable：设置为false，则不能选中row，设置true选中，可以触发change事件
        *
        *
        *
     -->
    <kendo-gantt id="gantt"
      :height="'500'"
      :navigatable="true"
      :editable-create="false"
      :data-source="datasource"
      :columns="columns"
      :work-week-start="2"
      :hour-span="1"
      :snap="false"
      :resizable="true"
      :selectable="false"
      :task-template="temp"
      :dependencies="dependencydatasource">
      <kendo-gantt-view :type="'day'"></kendo-gantt-view>
      <kendo-gantt-view :type="'week'" :selected="true"></kendo-gantt-view>
      <kendo-gantt-view :type="'month'"></kendo-gantt-view>
    </kendo-gantt>
  </div>
</template>

<script>

export default {
  components: {
  },
  data () {
    return {
      datasource: [
        {
          id: 0,
          parentId: null,
          title: '项目-江淮大众',
          summary: true,
          expanded: true,
          percentComplete: 0.3,
          start: new Date('2014/6/17 9:00'),
          end: new Date('2014/7/23 11:00')
        },
        {
          id: 1,
          parentId: 0,
          title: '调研阶段',
          summary: true,
          percentComplete: 0.47,
          start: new Date('2014/6/17 11:00'),
          end: new Date('2014/6/20 14:00')
        },
        {
          id: 11,
          parentId: 1,
          title: '需求调研',
          percentComplete: 0.47,
          start: new Date('2014/6/17 11:00'),
          end: new Date('2014/6/18 14:00')
        },
        {
          id: 12,
          parentId: 1,
          title: '蓝图设计',
          percentComplete: 0.47,
          start: new Date('2014/6/18 11:00'),
          end: new Date('2014/6/20 14:00')
        },
        {
          id: 2,
          parentId: 0,
          title: '开发阶段',
          summary: true,
          percentComplete: 0.5,
          start: new Date('2014/7/11 11:00'),
          end: new Date('2014/7/22 14:00')
        },
        {
          id: 21,
          parentId: 2,
          title: '技术选型',
          percentComplete: 0.5,
          start: new Date('2014/7/11 11:00'),
          end: new Date('2014/7/13 14:00')
        },
        {
          id: 22,
          parentId: 2,
          title: '代码实现',
          percentComplete: 0.5,
          start: new Date('2014/7/14 11:00'),
          end: new Date('2014/7/18 14:00')
        },
        {
          id: 23,
          parentId: 2,
          title: '接口对接',
          percentComplete: 0.5,
          start: new Date('2014/7/19 11:00'),
          end: new Date('2014/7/22 14:00')
        },
        {
          id: 5,
          parentId: null,
          title: '项目-前途汽车',
          summary: true,
          expanded: true,
          percentComplete: 0.3,
          start: new Date('2014/6/17 9:00'),
          end: new Date('2014/7/23 11:00')
        },
        {
          id: 51,
          parentId: 5,
          title: '阶段一',
          summary: true,
          percentComplete: 0.47,
          start: new Date('2014/6/17 11:00'),
          end: new Date('2014/6/20 14:00')
        },
        {
          id: 511,
          parentId: 51,
          title: '任务一',
          percentComplete: 0.47,
          start: new Date('2014/6/17 11:00'),
          end: new Date('2014/6/20 14:00')
        },
        {
          id: 52,
          parentId: 5,
          title: '阶段二',
          summary: true,
          percentComplete: 0.47,
          start: new Date('2014/6/17 11:00'),
          end: new Date('2014/6/20 14:00')
        },
        {
          id: 53,
          parentId: 5,
          title: '阶段三',
          summary: true,
          percentComplete: 0.47,
          start: new Date('2014/6/17 11:00'),
          end: new Date('2014/6/20 14:00')
        }
      ],
      dependencydatasource: [ // 箭头渲染，依赖关系
        {
          predecessorId: 1,
          successorId: 2,
          type: 1
        }
      ],
      columns: [
        { field: 'id', title: 'ID', width: '40px' },
        { field: 'title', title: 'Title', editable: true, sortable: true, width: '150px' },
        { field: 'start', title: 'Start', format: '{0:MM/dd/yyyy}', editable: true, sortable: true, width: '120px' },
        { field: 'end', title: 'End', format: '{0:MM/dd/yyyy}', editable: true, sortable: true, width: '120px' }
      ],
      temp: function (task) {
        console.log(task, '==========')
        return `${task.title}:自定义的模板`
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="stylus" scoped>
</style>
